<!DOCTYPE html>
<html>
    
    <head>
        <title>流媒体加速网关</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <!-- Bootstrap -->
        <link href="View/FHL/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="View/FHL/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="View/FHL/assets/styles.css" rel="stylesheet" media="screen">
        <link href="View/FHL/assets/DT_bootstrap.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/jGrowl/jquery.jgrowl.css" rel="stylesheet" media="screen">
        <link href="public/css/font-awesome.min.css" rel="stylesheet" media="screen">
        <!--[if lte IE 8]>
        <script language="javascript" type="text/javascript" src="View/FHL/vendors/flot/excanvas.min.js"></script>
        <![endif]-->
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>

        <![endif]-->
        <script src="View/FHL/vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <style>
        td{
            word-wrap:break-word;
            text-align: center;
        }
        table{
            table-layout:fixed ;
        }
        #setMode {
            height:700px;
            /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
            width:800px;
        }
        #setMode .modal-body {
            height:600px;
            max-height: 600px;
            /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
            width:700px;
            /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
        /*margin:-250px -450px;*/
        }
    </style>
    
    <body>
    {include h}
        <div class="container-fluid">

            <div class="row-fluid">
                {include l}
                <!--/span-->
                <div class="span10" id="content">
                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">流媒体加速网关</div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                    <div class="alert {if $hasRun}alert-success{elseif $isDirectRoute} alert-warning {else}alert-error{/if} " id="runStatu">
                                        {if $hasRun}
                                        <strong>已运行&nbsp</strong>[{$cmd}]
                                        {elseif $isDirectRoute}
                                        <strong>直通 &nbsp</strong>[{$directRoute}]
                                        {else}
                                        <strong>未运行&nbsp</strong>[{$cmd}]
                                        {/if}
                                    </div>
                                </div>
                                <div class="span12">
                                    <div class="span6">
                                        <div style="clear: both">
                                            <label class="control-label" for="netmask" style="float: left;padding-top: 9px;width: 100px;text-align: right" >启动模式：</label>
                                            <select id="mode" style="float: left;padding-top: 9px">
                                                <option value="c">客户端</option>
                                                <option value="s">服务端</option>
                                            </select>
                                        </div>
                                        <div style="clear: both">
                                            <label class="control-label" for="lip" style="float: left;padding-top: 9px;width: 100px;text-align: right" >本地互联IP：</label>
                                            <input class="input-xlarge focused" id="lip" style="float: left;margin-top: 5px"
                                                   type="text" value="{$Gtask.lip}">
                                        </div>
                                        <div style="clear: both" id="divLport">
                                            <label class="control-label" for="lport" style="float: left;padding-top: 9px;width: 100px;text-align: right" >本地互联端口：</label>
                                            <input class="input-xlarge focused" id="lport" style="float: left;margin-top: 5px"
                                                   type="text" value="{$Gtask.lport}">
                                        </div>
                                        <div style="clear: both" id="divRip">
                                            <label class="control-label" for="rip" style="float: left;padding-top: 9px;width: 100px;text-align: right" >远端互联IP：</label>
                                            <input class="input-xlarge focused" id="rip" style="float: left;margin-top: 5px"
                                                   type="text" value="{$Gtask.rip}">
                                        </div>
                                        <div style="clear: both" id="divRport">
                                            <label class="control-label" for="rport" style="float: left;padding-top: 9px;width: 100px;text-align: right" >远端互联端口：</label>
                                            <input class="input-xlarge focused" id="rport" style="float: left;margin-top: 5px"
                                                   type="text" value="{$Gtask.rport}">
                                        </div>
                                        <div style="clear: both">
                                            <label class="control-label" for="destination" style="float: left;padding-top: 9px;width: 100px;text-align: right" >对端被加速子网网段：</label>
                                            <input class="input-xlarge focused" id="destination" style="float: left;margin-top: 5px"
                                                   type="text" value="{$Gtask.destination}">
                                        </div>
                                        <div style="clear: both">
                                            <label class="control-label" for="netmask" style="float: left;padding-top: 9px;width: 100px;text-align: right" >子网掩码：</label>
                                            <input class="input-xlarge focused" id="netmask" style="float: left;margin-top: 5px"
                                                   type="text" value="{$Gtask.netmask}">
                                        </div>
                                        <div style="clear: both">
                                            <label class="control-label" for="localGate" style="float: left;padding-top: 9px;width: 100px;text-align: right" >本地被加速子网网关：</label>
                                            <input class="input-xlarge focused" id="localGate" style="float: left;margin-top: 5px"
                                                   type="text" value="{$Gtask.localGate}">
                                        </div>
                                        <div style="clear: both">
                                            <label class="control-label" for="remoteGate" style="float: left;padding-top: 9px;width: 100px;text-align: right" >远端被加速子网网关：</label>
                                            <input class="input-xlarge focused" id="remoteGate" style="float: left;margin-top: 5px"
                                                   type="text" value="{$Gtask.remoteGate}">
                                        </div>
                                    </div>
                                    <div class="span6">
                                        <button data-href="?set/t.html"  style="margin-left: 10px;width: 120px;height: 300px" id="start"
                                                class="btn btn-success btn-large ">开加速</button>
                                        <button data-href="?set/t.html"  style="margin-left: 10px;width: 120px;height: 300px" id="stop"
                                                class="btn btn-danger btn-large ">关加速</button>
                                        <button data-href="?set/t.html"  style="margin-left: 10px;width: 120px;height: 300px ;display:none" id="direct"
                                                class="btn btn-info btn-large ">直通</button>
                                        <button data-href="?set/t.html"  style="margin-left: 10px;width: 120px;height: 300px" id="autoTest"
                                                class="btn btn-info btn-large ">自检</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- /block -->
                        <div id="sysTestModal" class="modal hide" style="width: 50%;
                        top: 50%;
                        left: 70%;
                        transform: translate(-50%, -50%);">
                            <div class="modal-header">
                                <button data-dismiss="modal" class="close" type="button">&times;</button>
                                <h3>测试反馈</h3>
                            </div>
                            <div class="modal-body" id="sysTestContent">

                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <hr>
            {include f}
        </div>
        <!--/.fluid-container-->
        <link href="View/FHL/vendors/datepicker.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/uniform.default.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/chosen.min.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href="View/FHL/vendors/morris/morris.css">


        <script src="View/FHL/vendors/jquery-1.9.1.js"></script>
        <script src="View/FHL/bootstrap/js/bootstrap.min.js"></script>
        <script src="View/FHL/vendors/datatables/js/jquery.dataTables.min.js"></script>

        <script src="View/FHL/vendors/jquery.uniform.min.js"></script>
        <script src="View/FHL/vendors/chosen.jquery.min.js"></script>
        <script src="View/FHL/vendors/bootstrap-datepicker.js"></script>

        <script src="View/FHL/assets/DT_bootstrap.js"></script>
        <script src="View/FHL/vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
        <script src="View/FHL/vendors/wysiwyg/bootstrap-wysihtml5.js"></script>

        <script src="View/FHL/vendors/wizard/jquery.bootstrap.wizard.min.js"></script>
		<script src="View/FHL/vendors/jGrowl/jquery.jgrowl.js"></script>

        <script src="View/FHL/assets/scripts.js"></script>

        <script src="View/FHL/vendors/raphael-min.js"></script>
        <script src="View/FHL/vendors/morris/morris.min.js"></script>
        <script src="View/FHL/assets/echarts.min.js"></script>
        <script>


        $(function() {
            //refreshTask();
            $(".uniform_on").uniform();

            $('.textarea').wysihtml5();
			$('.form').submit(function() {return false;});
            //默认是客户端 后续还要根据数据库反馈结果判断
            if('s'=='{$Gtask.mode}'){
                //服务端
                $('#mode').val('s');
                $('#divRport').addClass("hidden");
                $('#divRip').addClass("hidden");
                $('#divLport').removeClass("hidden");
            }else {
                //客户端
                $('#mode').val('c');
                $('#divRport').removeClass("hidden");
                $('#divRip').removeClass("hidden");
                $('#divLport').addClass("hidden");
            }
            $("#mode").change(function(){
                var direction=($(this).val());
                if(direction=="c"){
                    //客户端 发送信息
                    $('#divRport').removeClass("hidden");
                    $('#divRip').removeClass("hidden");
                    $('#divLport').addClass("hidden");

                }else if(direction=="s"){
                    //服务端
                    $('#divRport').addClass("hidden");
                    $('#divRip').addClass("hidden");
                    $('#divLport').removeClass("hidden");

                }
            });
            $("#level").change(function(){
                var level=($(this).val());
                if(level=="1"){
                    //接收方向
                    $('#lport_help').html("本地监听的加速接口 udp协议");
                    $('#divRip').addClass("hidden");
                    $('#divRport').addClass("hidden");
                }else if(level=="2"){

                    $('#lport_help').html("本地浏览器设置代理时使用这个端口 TCP协议");
                    $('#divRip').removeClass("hidden");
                    $('#divRport').removeClass("hidden");
                }
            });
            //执行任务操作命令
            $("#start").click(function (e){
                $.get("?task/restartTask?", {
                    type:'g',
                    mode:$('#mode').val(),
                    lip:$('#lip').val(),
                    lport:$('#lport').val(),
                    rip:$('#rip').val(),
                    rport:$('#rport').val(),
                    destination:$('#destination').val(),
                    netmask:$('#netmask').val(),
                    localGate:$('#localGate').val(),
                    remoteGate:$('#remoteGate').val(),
                },  function(ee){
                    if(ee.state){
                        $.jGrowl(ee.info);
                        location.reload();
                    }else{
                        $.jGrowl(ee.info);
                    }
                },'json');

            });
            $("#stop").click(function (e){
                $.get("?task/killTask?", {
                    type:'g',
                },  function(ee){
                    if(ee.state){
                        $.jGrowl(ee.info);
                        location.reload();
                    }else{
                        $.jGrowl(ee.info);
                    }
                },'json');
            });

            $("#direct").click(function (e){
                $.get("?task/directRoute?", {
                    destination:$('#destination').val(),
                    netmask:$('#netmask').val(),
                    rip:$('#rip').val()
                },  function(ee){
                    if(ee.state){
                        $.jGrowl(ee.info);
                        location.reload();
                    }else{
                        $.jGrowl(ee.info);
                    }
                },'json');
            });
//自检按钮
            $("#autoTest").click(function (e){
                $.jGrowl("系统正在自检。。。。。。");
                $.get("?task/autoTest?", {
                    'type':'g',
                    localGate:$('#localGate').val(),
                    remoteGate:$('#remoteGate').val()
                },  function(ee){
                    if(ee.state){
                        $('#sysTestContent').empty();
                        for(var i in ee.info){
                            $('#sysTestContent').append("<pre>"+ee.info[i]+"</pre>");
                        }
                        $('#sysTestModal').modal('show')
                    }else{
                        $.jGrowl(ee.info);
                    }
                },'json');
            });

            
        });
        </script>
    </body>

</html>